<template>
	<view>
		<view class="session" @tap="toGroupRoom(-2)">
			<view class="container">
				<view class="avatar-container">
					<image class="avatar" src="../../static/icon/dchat-fill.png"></image>
					<text class="unchecked" v-show="lobbyMessages.unchecked>0">{{lobbyMessages.unchecked}}</text>
				</view>
				<view class="content">
					<text class="name">{{'公共聊天室(在线'+lobbyMessages.online+'人)'}}</text>
					<text class="preview">{{lobbyMessages.lastMessage.length<20?lobbyMessages.lastMessage:lobbyMessages.lastMessage.substr(0,20)+'···'}}</text>
				</view>
				<view class="time-container">
					<text v-show="lobbyMessages.lastTime!=''" class="time" >{{showLastTime(lobbyMessages.lastTime)}}</text>
				</view>
			</view>
		</view>
		<view class="session" v-for="(session,index) in sessions" :key="session.id" @tap="toChatRoom(index)" @longpress="deleteSession(index)">
			<view class="container">
				<view class="avatar-container">
					<image class="avatar"  :src="session.avatar"></image>
					<text class="unchecked" v-show="session.unchecked>0">{{session.unchecked}}</text>
				</view>
				<view class="content">
					<text class="name">{{session.name}}</text>
					<text class="preview">{{session.lastMessage.length<20?session.lastMessage:session.lastMessage.substr(0,20)+'···'}}</text>
				</view>
				<view class="time-container">
					<text class="time">{{showLastTime(session.lastTime)}}</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import WebSocket from '@/common/websocket.js';
	import dateUtil from 'util/date';
	import {mapGetters,mapActions} from 'vuex';
	export default {
		data() {
			return {
				timeNow: dateUtil.getTimeNow(),
			}
		},
		onNavigationBarButtonTap: (button) => {
			if(button.index==0){
				uni.navigateTo({
					url:'../other/search/search',
					animationType:'slide-in-right',
				})
			}
		},
		onShow(){
			//socket断开了就重新连接
			// if(this.lobbyMessages.online==0&&this.token!=''){
			// 	WebSocket.connectSocketInit();
			// }
			
		},
		onLoad() {
			this.sortSessionByTime();
			
		},
		
		//通过计算属性可以读取并实时监听状态的变化
		computed: {
		   ...mapGetters(['sessions','token','isSocketOpen','lobbyMessages']),
		},
		methods: {
			...mapActions(['sortSessionByTime','removeSession']),
			deleteSession(index){
				let that = this;
				uni.showModal({
					title:'删除会话',
					confirmText:'确定',
					cancelText:'取消',
					confirmColor:'#D94B4D',
					content:'聊天记录不会保存',
					success:function(res){
						if(res.confirm){
							that.removeSession(index);
						}
					}
				})
			},
			toGroupRoom(index){
				uni.navigateTo({
					url:'groupRoom/groupRoom?index='+index,
					animationType:'slide-in-right',
				})
			},
			toChatRoom(index){
				if(this.sessions[index].id[0]=='g'){
					uni.navigateTo({
						url:'group/group?index='+index,
						animationType:'slide-in-right',
					})
				}else{
					uni.navigateTo({
						url:'chatRoom/chatRoom?index='+index,
						animationType:'slide-in-right',
					})
				}
			},
			showLastTime(lastTime){
				let gap = dateUtil.TimeDifference(lastTime,dateUtil.getTimeNow());
				if(gap==0){
					let date = new Date(lastTime);
					return date.getHours()+":"+date.getMinutes();
				}
				else if(gap==1) return "昨天";
				else if(gap==2) return "前天";
				else{
					let date = new Date(lastTime);
					return (date.getMonth()+1)+"月"+date.getDate()+"日";
				}
			},
			toLogin(){
				uni.navigateTo({
					url:"../index/login"
				})
			}
		}
	}
</script>

<style scoped>
	.session{
		border-radius: 15rpx;
		/* background-color: rgb(200,199,204); */
	}
	.session :hover{
		border-radius: 15rpx;
		background-color: rgb(200,199,204); 
	}
	.container{
		width: 100%;
		display: flex;
		margin-top: 10rpx;
	}

	.unchecked{
		display: block;
		width: 40rpx; height: 40rpx;
		background-color: red; color: white;
		font-size:medium;
		text-align: center; line-height: 40rpx;
		border-radius: 50%;
		position: absolute; right: -10px; top: -10rpx;
 	}
	.avatar-container{
		position: relative;
		margin: 10rpx;
	}
	.avatar{
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}
	.content{
		display: flex;
		align-items: auto;
		flex-direction: column;
		justify-content: center;
		padding-left: 10rpx;
	}
	.name{
		text-align: left;
		margin-top: 0;
		font-weight: 1000;
	}
	.preview{
		margin-bottom: 0;
		font-size: smaller;
	}
	.time-container{
		margin-left: auto;
		margin-right: 20rpx;
		display: flex;
	}
	.time{
		font-size: smaller;
		margin-top: auto;
		margin-bottom: auto;
		text-align: center;
	}
</style>
